<template>
	<u-grid :col="3">
		<u-grid-item v-for="(item,index) in childrenList" @click="itemClick(index)">
			<children-info-view :imgUrl="item.imgUrl" :name="item.name"></children-info-view>
		</u-grid-item>
	</u-grid>
</template>

<script>
	import { getChildrenByPlan } from  '@/api/observation.js'
	import ChildrenInfoView from '@/components/children-info-view.vue'
	export default {
		name: "CourseDetailScheduleView",
		components: {
			ChildrenInfoView
		},
		props: {
			coursePlanId: {
				type: String,
				default () {
					return ''
				}
			},
			category: {
				type: String,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				childrenList: [],
			}
		},
		created() {
			this.getChildrenList();
		},
		methods: {
			getChildrenList() {
				getChildrenByPlan(this.$props.coursePlanId, this.$props.category).then(res => {
					this.childrenList = res.data;
				})
			},
			
			itemClick(index) {
				const item = this.childrenList[index];
				console.log(item);
				item.coursePlanId = this.$props.coursePlanId;
				item.category = this.$props.category;
				this.$u.route({
					url: 'pages/course/course-observation-page',
					params: item
				})
			}
		}
	}
</script>

<style>

</style>
